<template>
<!-- 关于我 -->
<div class="bgc clearfix">
  <div class="aboutme">
    <div class="w">
      <!-- 左边 -->
      <div class="about-left">
        <!-- 挂载子组件 左侧导航栏-->
          <AboutNav></AboutNav>
      </div>
      <!-- 将子路由的内容渲染到这里 -->
      <router-view></router-view>
    </div>
      
  </div>
</div>
</template>

<script>
// 引入子组件
import AboutNav from '../components/AboutNav.vue';
import AboutAuthor from '../components/AboutAuthor.vue';
import MessageContact from '../components/MessageContact.vue';
// import FooterNav from '../components/FooterNav.vue';
export default {
  name:'AboutMe',
  data(){
    return{
      // flag:true,
    }
  },
  components:{
    AboutNav,
    AboutAuthor,
    MessageContact,
    // FooterNav,
  }
}
</script>

<style lang="less" scoped>

html{
  height: 100%;
}
body{
  height: 100%;
}
.bgc{
  margin-top: 0;
  height: 100%;
  border-top: 1px solid transparent;
  background: url("../assets/upload/bgc.jpg") no-repeat;
  background-size: cover;
}
.aboutme{
  margin-top: 70px;
  height: 100%;
  // background-color: pink;
  
  
}
// 左边
.about-left{
  position: fixed;
  float: left;
  width: 280px;
  // height: 500px;
  // background-color: pink;
}

// // 右边
// .content-r{
//   margin-left: 300px;
// }
// .about-right{
//   float: right;
//   width: 100%;
//   max-width: 900px;
//   margin-bottom: 15px;
//   background-color:#fff;
// }
// .about-right .about-title{
//   padding: 0 20px;
//   height: 75px;
//   line-height: 75px;
//   border-bottom: 1px solid #e5e5e5;
//   color: #333;
//   font-size: 20px;
//   font-weight: 400;
// }
// .about-right .about-content{
//   padding: 30px;
//   font-size: 14px;
//   line-height: 1.8;
// }
// .about-content p{
//   margin: 0 0 20px;
// }
// .about-content .about-img{
//   width: 840px;
//   height: 360px;
//   margin: 0 auto 20px;
// }
// .about-img img{
//   width: 840px;
//   height: 360px;
// }
// .aboutme .about-footer{
//   float: left;
//   width: 100%;
//   height: 50px;
//   background-color: #000;
// }
// .about-footer .footer-l{
//   float: left;
//   background-color: #000;
//   padding: 16px 0 14px;
// }
// .footer-l .lll,
// .footer-r .rrr{
//   color: #ccc;
//   cursor: pointer;
// }
// .footer-l .lll:hover,
// .footer-r .rrr:hover{
//   color: #fff;
//   text-decoration: underline!important;
//   cursor: pointer;
// }

// .about-footer .footer-r{
//   float: right;
//   padding: 16px 0 14px;

// }
</style>

